<template>
	<view class="comment">
		<view class="comment-top">
			<UserDataVue></UserDataVue>
			<view class="comment-times">
				<span class="data">2020-02-02</span>
				<span class="time">11:11:11</span>
			</view>
		</view>
		<view class="comment-content">
			<span>是评里是评论的内容啦这里是评论的内容啦</span>
		</view>
	</view>
</template>

<script>
import UserDataVue from '../index/index_card/UserData.vue';

export default {
	name: 'comment',
	data() {
		return {};
	},
	components: {
		UserDataVue
	}
};
</script>

<style lang="scss">
.comment {
	width: 100%;
	height: 170rpx;
	border-radius: 10px;
	// background-color: red;
	border: 1px solid #eee;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	margin-top: 30px;
	padding-bottom: 30rpx;
	.comment-top {
		padding-left: 20rpx;
		padding-top: 10rpx;
		display: flex;
		width: 100%;
		.comment-times {
			span {
				font-size: 12px;
				margin-left: 20rpx;
			}
		}
	}
	.comment-content {
		margin-top: 10px;
		height: 50px;
		width: 95%;
		background-color: rgba(0, 0, 0, 0.1);
		border-radius: 5px;
		overflow: hidden;
		span {
			height: 100%;
			padding: 10px;
			font-size: 12px;
			white-space: wrap;
			text-overflow: ellipsis;
		}
	}
}
</style>
